<template>
  <div class="home">
    <div class="header">
      <ul class="ullist">
        <li>
          <IconPhoto></IconPhoto>
        </li>
        <li>
          <KJNovaClipper></KJNovaClipper>
        </li>
        <!-- <li><button>图片裁剪</button></li> -->
        <li>
          <GenerateqRcode></GenerateqRcode>
        </li>
        <li>
          <ManualCutout></ManualCutout>
        </li>
        <li>
          <Intelligentcutout></Intelligentcutout>
        </li>
        <li>
          <PreviewEffect></PreviewEffect>
        </li>
        <li>
          <RevOke></RevOke>
        </li>
        <li>
          <UploadImages></UploadImages>
        </li>
        <li>
          <PreviewWork></PreviewWork>
        </li>
        <li>
          <PreServe></PreServe>
        </li>
        <li>
          <ClearCache></ClearCache>
        </li>
        <li>
          <PureCanvas></PureCanvas>
        </li>
        <li>
          <PublishingWorks></PublishingWorks>
        </li>
        <li class="huabu">
          <CanvasSize></CanvasSize>
        </li>
        <li>导入</li>
        <li class="daoguanzi">导出</li>
      </ul>
    </div>
    <div class="main">
      <div class="left">
        <div class="leftone">
          <Left></Left>
          <!-- //渲染iconfont图表   这里还是要点击拖拽到中间画布middle部分-->
        </div>
        <div class="lefttwo">坐下</div>
      </div>

      <div class="middle">
        <center></center>
      </div>

      <!-- //画布center -->
      <div class="right">
        <div class="rightone">
          <RightTable></RightTable>
        </div>
      </div>
    </div>
    <div class="footer"></div>
  </div>
</template>
<script setup lang="ts">
import { RouterView, useRouter } from 'vue-router'
import IconPhoto from '../components/Projectencapsulation/IconPhoto.vue'
import KJNovaClipper from '../components/Projectencapsulation/KJNovaClipper.vue'
import GenerateqRcode from '../components/Projectencapsulation/GenerateqRcode.vue'
import ManualCutout from '../components/Projectencapsulation/ManualCutout.vue'
import Intelligentcutout from '../components/Projectencapsulation/IntelligentCutout.vue'
import PreviewEffect from '../components/Projectencapsulation/PreviewEffect.vue'
import RevOke from '../components/Projectencapsulation/RevOke.vue'
import UploadImages from '../components/Projectencapsulation/UploadImages.vue'
import PreviewWork from '../components/Projectencapsulation/PreviewWork.vue'
import PreServe from '../components/Projectencapsulation/PreServe.vue'
import PureCanvas from '../components/Projectencapsulation/PureCanvas.vue'
import PublishingWorks from '../components/Projectencapsulation/PublishingWorks.vue'
import ClearCache from '../components/Projectencapsulation/ClearCache.vue'
import CanvasSize from '../components/Projectencapsulation/CanvasSize.vue'
import Left from './home/Left.vue'
//引入阿里啊

import RightTable from '../components/RightTable.vue'
import center from '../views/center.vue'
import { ref } from 'vue'
//开始拖拽到画布
// const dragstart = (e: any, index: any) => {
//   console.log(index, '拖拽中。。。')
//   e.dataTransfer.setData('index', index)
// }
</script>
<style scoped lang="scss">
* {
  font-weight: 800;
  font-size: 52px;
}

.home {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

.header {
  height: 50px;
  border: 1px solid #eee;
  cursor: pointer; //小手

  .ullist {
    display: flex;
    justify-content: space-around;
    height: 50px;
    line-height: 50px;

    li {
      font-size: 16px;
      padding-left: 3px;
      border: 1px solid #eee;
    }

    .huabu {
      // background: yellowgreen;
      width: 250px;
      margin-left: -10px;
    }

    .daoguanzi {
      position: relative;
      right: 0%;
    }
  }
}

.main {
  flex: 1;
  overflow: hidden;
  border: 1px solid #eee;
  display: flex;
}

.footer {
  height: 50px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.left {
  width: 20%;
  height: 100%;
  border: 1px solid #eee;

  .leftone {
    height: 50%;
    width: 100%;
    border: 1px solid #eee;
    display: flex;
    flex-wrap: wrap;

    
  }

  .lefttwo {
    height: 50%;
    border: 1px solid #eee;
  }
}

.middle {
  width: 60%;
  height: 100%;
  border: 1px solid #eee;
  // background-color: red;
}

.right {
  width: 25%;
  height: 100%;
  border: 1px solid #eee;

  .rightone {
    height: 100%;
    border: 1px solid #eee;
  }
}

.el-menu-vertical-demo {
  width: 100%;
  height: 100%;
}
</style>
